<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 响应测试</title>
    <style>
        body {
            font-family: 'Courier New', monospace;
            margin: 20px;
            background: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        button {
            padding: 12px 24px;
            background: #409EFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px 0;
        }
        button:hover {
            background: #66b1ff;
        }
        pre {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
            max-height: 500px;
            overflow-y: auto;
        }
        .section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }
        .section h2 {
            margin-top: 0;
            color: #333;
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success {
            background: #f0f9ff;
            color: #0c5460;
            border: 1px solid #b8daff;
        }
        .error {
            background: #fff3f3;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .highlight {
            background: #fff3cd;
            padding: 2px 5px;
            border-radius: 3px;
        }
        .images img {
            max-width: 150px;
            max-height: 150px;
            margin: 10px;
            border: 2px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔍 后端API响应完整测试</h1>
        <p>测试 <code>get_obj</code> API 是否正确返回 <span class="highlight">accommodation_images</span> 字段</p>
        
        <button onclick="testAPI()">🚀 开始测试</button>
        
        <div id="status"></div>
        
        <div class="section">
            <h2>1️⃣ API 原始响应</h2>
            <pre id="rawResponse">等待测试...</pre>
        </div>
        
        <div class="section">
            <h2>2️⃣ 检查关键字段</h2>
            <div id="fieldCheck">等待测试...</div>
        </div>
        
        <div class="section">
            <h2>3️⃣ accommodation_images 详细分析</h2>
            <div id="accommodationAnalysis">等待测试...</div>
        </div>
        
        <div class="section">
            <h2>4️⃣ 图片预览</h2>
            <div id="imagePreview" class="images">等待测试...</div>
        </div>
    </div>

    <script>
        async function testAPI() {
            const statusDiv = document.getElementById('status');
            const rawResponseDiv = document.getElementById('rawResponse');
            const fieldCheckDiv = document.getElementById('fieldCheck');
            const accommodationDiv = document.getElementById('accommodationAnalysis');
            const imagePreviewDiv = document.getElementById('imagePreview');
            
            statusDiv.innerHTML = '<div class="status">⏳ 正在请求 API...</div>';
            rawResponseDiv.textContent = '加载中...';
            fieldCheckDiv.textContent = '等待...';
            accommodationDiv.textContent = '等待...';
            imagePreviewDiv.textContent = '等待...';
            
            try {
                const url = 'http://127.0.0.1:5000/api/meeting_information/get_obj?meeting_information_id=1';
                console.log('请求URL:', url);
                
                const response = await fetch(url);
                const data = await response.json();
                
                // 1. 显示原始响应
                rawResponseDiv.textContent = JSON.stringify(data, null, 2);
                
                if (!data || !data.result || !data.result.obj) {
                    statusDiv.innerHTML = '<div class="status error">❌ API返回格式不正确</div>';
                    return;
                }
                
                const obj = data.result.obj;
                statusDiv.innerHTML = '<div class="status success">✅ API请求成功！</div>';
                
                // 2. 检查所有字段
                const fieldsToCheck = [
                    'meeting_information_id',
                    'conference_name',
                    'meeting_venue',
                    'meeting_time',
                    'site_equipment',
                    'organizer_host',
                    'organizer_co',
                    'organizer_support',
                    'accommodation_images'  // 重点字段
                ];
                
                let fieldHtml = '<table style="width:100%; border-collapse: collapse;">';
                fieldHtml += '<tr style="background:#f0f0f0;"><th style="padding:8px;border:1px solid #ddd;">字段名</th><th style="padding:8px;border:1px solid #ddd;">类型</th><th style="padding:8px;border:1px solid #ddd;">值</th><th style="padding:8px;border:1px solid #ddd;">状态</th></tr>';
                
                fieldsToCheck.forEach(field => {
                    const value = obj[field];
                    const type = typeof value;
                    const exists = value !== undefined && value !== null;
                    const status = exists ? '✅' : '❌';
                    const displayValue = exists ? (value.length > 50 ? value.substring(0, 50) + '...' : value) : 'undefined';
                    
                    fieldHtml += `<tr style="background:${field === 'accommodation_images' ? '#ffffcc' : 'white'};">`;
                    fieldHtml += `<td style="padding:8px;border:1px solid #ddd;"><strong>${field}</strong></td>`;
                    fieldHtml += `<td style="padding:8px;border:1px solid #ddd;">${type}</td>`;
                    fieldHtml += `<td style="padding:8px;border:1px solid #ddd;font-family:monospace;">${displayValue}</td>`;
                    fieldHtml += `<td style="padding:8px;border:1px solid #ddd;text-align:center;">${status}</td>`;
                    fieldHtml += '</tr>';
                });
                
                fieldHtml += '</table>';
                fieldCheckDiv.innerHTML = fieldHtml;
                
                // 3. 重点分析 accommodation_images
                if (obj.accommodation_images) {
                    let analysisHtml = `<p><strong>✅ accommodation_images 字段存在</strong></p>`;
                    analysisHtml += `<p>类型: ${typeof obj.accommodation_images}</p>`;
                    analysisHtml += `<p>长度: ${obj.accommodation_images.length} 字符</p>`;
                    analysisHtml += `<p>原始值:</p>`;
                    analysisHtml += `<pre style="background:#f5f5f5;padding:10px;border:1px solid #ddd;">${obj.accommodation_images}</pre>`;
                    
                    try {
                        const images = JSON.parse(obj.accommodation_images);
                        analysisHtml += `<p><strong>✅ JSON 解析成功</strong></p>`;
                        analysisHtml += `<p>图片数量: ${images.length}</p>`;
                        analysisHtml += `<p>解析后的数据:</p>`;
                        analysisHtml += `<pre style="background:#e8f5e9;padding:10px;border:1px solid #4caf50;">${JSON.stringify(images, null, 2)}</pre>`;
                        
                        // 4. 显示图片预览
                        let imagesHtml = '';
                        images.forEach((img, index) => {
                            const imgUrl = `http://127.0.0.1:5000${img.url}`;
                            imagesHtml += `
                                <div style="display:inline-block; margin:10px; text-align:center;">
                                    <img src="${imgUrl}" alt="${img.caption}" 
                                         onerror="this.style.border='3px solid red'; this.alt='❌ 加载失败';"
                                         onload="this.style.border='3px solid green';">
                                    <p style="max-width:150px; word-wrap:break-word;">${img.caption}</p>
                                    <p style="font-size:0.8em; color:#666;">${img.url}</p>
                                </div>
                            `;
                        });
                        imagePreviewDiv.innerHTML = imagesHtml;
                        
                    } catch (e) {
                        analysisHtml += `<p><strong>❌ JSON 解析失败</strong></p>`;
                        analysisHtml += `<p>错误: ${e.message}</p>`;
                        imagePreviewDiv.innerHTML = '<p style="color:red;">JSON解析失败，无法显示图片</p>';
                    }
                    
                    accommodationDiv.innerHTML = analysisHtml;
                    
                } else {
                    accommodationDiv.innerHTML = `
                        <p style="color:red;"><strong>❌ accommodation_images 字段为空或未定义</strong></p>
                        <p>这是问题的根源！后端没有返回这个字段的数据。</p>
                        <p><strong>建议检查：</strong></p>
                        <ul>
                            <li>1. 数据库中 meeting_information 表的 accommodation_images 字段是否有数据</li>
                            <li>2. 后端 Entity (MeetingInformation.java) 是否包含该字段</li>
                            <li>3. 后端是否重新编译和重启</li>
                        </ul>
                    `;
                    imagePreviewDiv.innerHTML = '<p style="color:red;">无法显示图片：字段未返回</p>';
                }
                
            } catch (error) {
                console.error('测试失败:', error);
                statusDiv.innerHTML = `<div class="status error">❌ 测试失败: ${error.message}</div>`;
                rawResponseDiv.textContent = `错误: ${error.message}\n${error.stack}`;
            }
        }
        
        // 自动执行测试
        // window.onload = testAPI;
    </script>
</body>
</html>




